<template>
    <div class="about" id="funeralNotice">
        <div id="funeralNotice2">
            <div class="title">尊敬的服务对象：</div>
            <div>您好！感谢您的信任，选择到昆明西郊殡仪馆办理治丧业务。为深化殡葬改革，推进移风易俗，现就推行文明节俭治丧有关事宜向您倡导如下：</div>
            <div>一、文明治丧，节俭办事，革除陈规陋习，抵制封建迷信，提倡厚养薄葬，弘扬精神美德；</div>
            <div>二、我馆严格执行政府定价或政府指导价，提供优质的四项基本服务；</div>
            <div>三、我馆为满足个性化需求，提供优质的非基本服务和丧葬用品，请您在自主选择时杜绝铺张浪费，树立文明新风。</div>
            <div>四、如果您对我们的价格及服务不满意，请拨打以下投诉电话，我们将用心倾听您的声音，竭诚为您解决问题。</div>
            <div>（馆长：18183862262；书记：18183866125）</div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                interval8: '',
            }
        },
        props: {
            isScroll: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            isScroll(nVal, oVal) {
                if (nVal) {
                    this.scrollView8()
                } else {
                    clearInterval(this.interval8)
                }
            }
        },
        mounted() {
        },
        beforeDestroy() {
            clearInterval(this.interval8)
        },
        methods: {
            scrollView8() {
                this.$nextTick(()=>{
                    let funeralNotice = document.getElementById('funeralNotice')	
                    let funeralNotice2 = document.getElementById('funeralNotice2')	
                    let startL = -funeralNotice.offsetHeight
                    this.interval8 = setInterval(() => {
                        startL+=1
                        if (startL >= (funeralNotice2.scrollHeight)) {
                            startL = -funeralNotice.offsetHeight
                        }
                        funeralNotice2.style.top = -startL + 'px'//上移高度
                    }, 30)
                })
            },
        },
    }
</script>
<style scoped lang="scss">
    // .about {
    //     padding: 20px;
    //     background: rgb(38, 80, 144);
    //     font-size: 60px;
    //     text-align: left;
    //     text-indent: 120px;
    //     line-height: 70px;
    //     .title {
    //         text-indent: 0px;
    //     }
    // }

    .about {
        padding: 20px;
        height: 100%;
        background: rgb(38, 80, 144);
        font-size: 70px;
        letter-spacing: 5px;
        text-align: left;
        text-indent: 140px;
        line-height: 120px;
        // height: 800px;
        overflow-y: scroll;
        .title {
            text-indent: 0px;
        }
    }
    #funeralNotice2 {
        position: relative;
    }
    /* 隐藏滚动条 */
	::-webkit-scrollbar {
		width: 0 !important;
	}
	/* 滚动条背景颜色 */
	::-webkit-scrollbar {
		background-color: 0 !important;
	}
</style>